<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
			background: url('bg.jpg') no-repeat 0 0/100% 100%;
		}
		#main {
			width: 100%;
			height: 100%;
		}
        .expandContainer {
            position: absolute;
            left: 115px;
            top: 2%;
            width: 300px;
            height: 50px;
            color: #1be6f4;
        }
        .gobackBtn {
            cursor: pointer;
            transition: color 0.3s;
            display: none;
        }
        .gobackBtn:hover {
            color: #fff900;
        }
        .expandArrow {
            display: none;
        }
	</style>
	<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="lib/TweenMax.min.js"></script>
	<script type="text/javascript" src="lib/pixi.min.js"></script>
	<script type="text/javascript" src="js/AnimatedObject.js"></script>
	<script type="text/javascript" src="js/MapChart.js"></script>
	<script type="text/javascript" src="js/Map.js"></script>
</head>
<body>
	<div id="main"></div>
    <div class="expandContainer">
        <span class="gobackBtn" id='firstLevelBtn'>全球</span>
        <span class="expandArrow"> > </span>
        <span class="gobackBtn" id='secondLevelBtn'>中国</span>
        <span class="expandArrow"> > </span>
        <span class="gobackBtn" id="thirdLevelBtn">北京</span>
    </div>

	<script type="text/javascript">
		var fillData = [
        	{areaField: 'China', areaValue: 100},
        	{areaField: 'Russia', areaValue: 900},
        	{areaField: 'United States of America', areaValue: 5000},
        	{areaField: 'Japan', areaValue: 2000},
        	{areaField: 'Cuba', areaValue: 500},
        	{areaField: 'Chile', areaValue: 600},
        	{areaField: 'Benin', areaValue: 700}
        ];
        var data = [
            {sourceLng: 116.28, sourceLat: 40.54, targetLng: 121.29, targetLat: 31.14},
            {sourceLng: 116.28, sourceLat: 40.54, targetLng: 114.15, targetLat: 22.54}
        ];
        var dotData = [
            {dotLng: 116.28, dotLat: 40.54, dotValue: 100},
            {dotLng: 121.29, dotLat: 31.14, dotValue: 200}
        ];
        var config = {
            sourceLng: 'sourceLng',
            sourceLat: 'sourceLat',
            targetLng: 'targetLng',
            targetLat: 'targetLat',
            dotLng: 'dotLng',
            dotLat: 'dotLat',
            dotValue: 'dotValue',
            areaField: 'areaField',
            areaValue: 'areaValue'
        };

		var map = new WbstChart.Map('main');
		map.resize({width: document.getElementById('main').offsetWidth, height: document.getElementById('main').offsetHeight});
		map.setConfig(config);
  		// map.setFillData(fillData);
  		map.setLineData(data);
  		map.setDotData(dotData);
  		map.render();
	</script>
</body>
</html>